<template>

  <div class="container">

    <el-dialog :title="$t('page.dialog-change-password.first-login-title')" :visible.sync="changePasswordVisible" append-to-body :close-on-click-modal="false" width="400px" :show-close="false">
        
      <el-form ref="form-change-password" size="mini" :model="formChangePassword" :rules="rulesChangePassword">

        <!-- 当前密码 -->
        <el-form-item :label="$t('page.dialog-change-password.current-password')" prop="passwordNow">
          <el-input placeholder="" type="password" v-model="formChangePassword.passwordNow" @keyup.enter.native="submitFormChangePassword"  clearable></el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item :label="$t('page-register.form.password')" prop="password">
          <el-input placeholder="" type="password" v-model="formChangePassword.password" @keyup.enter.native="submitFormChangePassword"  clearable></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item :label="$t('page-register.form.password-next')" prop="password_confirmation">
          <el-input placeholder="" type="password" v-model="formChangePassword.password_confirmation" @keyup.enter.native="submitFormChangePassword"  clearable></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="mini">{{$t('page.form.cancel')}}</el-button>
        <el-button @click="submitFormChangePassword" size="mini" type="primary">{{$t('page.form.confirm')}}</el-button>
      </div>

    </el-dialog>

    <!-- <span style="margin-right: 20px;"></span> -->
  </div>

</template>

<script>

import dayjs from 'dayjs'
import { mapState, mapActions } from 'vuex'
import ApiUser from '@/api/merchant.member';

export default {
  data () {

    return {
      version: process.env.VUE_APP_VERSION || '发布版本号',
      build: process.env.VUE_APP_BUILD_TIME ?  dayjs(process.env.VUE_APP_BUILD_TIME).format('YYYYMMDDHHmmss') : null,

      changePasswordVisible: true,

      formChangePassword: {
        passwordNow    : '',
        password       : '',
        password_confirmation: '',
      },

      rulesChangePassword: {
        passwordNow: [
          { required: true, message: this.$t('page.form-hint.required'), trigger: 'blur' },
        ],

        password: [
          { required: true, message: this.$t('page.form-hint.required'), trigger: 'blur' },
        ],

        password_confirmation: [
          { required: true, message: this.$t('page.form-hint.required'), trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (value !== this.formChangePassword.password) {
                callback(new Error(this.$t('page.form-hint.password-confirm-fail')));
              }
              else {
                callback();
              }
            }, 
            trigger: 'blur' 
          },
        ],
      },


    };

  },
  computed: {
    ...mapState('d2admin/user', {
      user: 'info',
    })
  },
  mounted () {
  },
  methods: {
    ...mapActions('d2admin/account', [
      'logout'
    ]),
    /**
     * @description 登出
     */
    logOff () {

      this.logout({
        confirm: true
      })
    },

    handleCancel () {
      this.logout();
    },

    submitFormChangePassword () {

      this.$refs['form-change-password'].validate(valid => {

        if (valid) {
          ApiUser.changePassword(this.formChangePassword).then(() => {
            this.$message({message: this.$t('page-form.form.modifysuccessfully'), type: 'success'});
            this.logout();
            
            // this.$router.replace({
            //   name: 'login',
            //   query: {
            //     redirect: this.$route.fullPath
            //   }
            // });
          });
        }
      });

    },
  }
}
</script>

<style scoped>
  
  .center {
    text-align: center;
  }

  .item {
    margin: 10px auto;
  }

  .ceil {
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
  }

  .container {
    margin-right: 20px;
  }

</style>